<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--<button id="send">我寄的</button>-->
<!--<button id="receive">我收的</button>-->
<!--<button id="selectSend">查询寄的</button>-->
<input type="text" id="searchInput" placeholder="输入寄件人单号，姓名，手机号">
<button id="selectBtn">查询</button>

<div class="container">
<table id="pageTable" class="table table-bordered">
    <th>序号</th>
    <th>快递编号</th>
    <th>寄件人姓名</th>
<!--    <th>寄件人电话</th>-->
<!--    <th>寄件人所属区域</th>-->
<!--    <th>寄件人详情地址</th>-->
    <th>收件人姓名</th>
<!--    <th>收件人电话</th>-->
<!--    <th>收件人所属区域</th>-->
<!--    <th>收件人详情地址</th>-->
<!--    <th>物品类型</th>-->
<!--    <th>重量(KG)</th>-->
<!--    <th>寄件备注</th>-->
    <th>取件码</th>
    <th>状态</th>
    <th>操作</th>
</table>
    <nav style="text-align: right">
        <ul class="pagination" style="margin: 0 auto;">
        </ul>
    </nav>
</div>
<!--订单详情 模态框-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">订单详情</h4>
            </div>
            <div class="modal-body">
                <div class="el-dialog__body">
                    <div class="info-box">
                        <div class="bar" style="text-align: center">
                            <p id="pageNum"></p>
                            <p id="status"></p>
                        </div>
                        <table cellpadding="0" cellspacing="1" class="table table-bordered">
                            <tr>
                                <td>寄件</td>
                                <td><h3 id="sNameAndPhone"></h3>
                                    <p id="sAddressAndDetailAddress">

                                </td>
                            </tr>
                            <tr>
                                <td>收件</td>
                                <td><h3 id="rNameAndPhone"></h3>
                                    <p id="rAddressAndDetailAddress"></p></td>
                            </tr>
                            <tr>
                                <td>其他</td>
                                <td><p><em id="createTime"></em></p>
                                    <p><em id="finishTime"></em></p>
                                </td>
                                <td><p><em id="Weight"></em></p>
                                    <p><em id="Remark"></em></p>
                                </td>

                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="deleteOrder" data-target="#myModal2"
                        data-toggle="modal" style="display: none">删除订单
                </button>
                <button type="button" class="btn btn-primary" id="updateOrder" style="display:none">修改订单</button>
            </div>
        </div>
    </div>
</div>

<!--删除/取消订单 模态框 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" id="close" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h2 class="modal-title">提示</h2>
            </div>
            <div class="modal-body">
                <img src="/sdkd/user/img/exclamationMark.svg" alt="" style="float: left"><h4 id="text"></h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                <button type="button" class="btn btn-primary" id="ensure">确定</button>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../../configure.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
    /**
     * 王晶晶
     */
    //订单详情
    $("body").on("click",".orderDetail",function () {

        $.post("/sdkd/admin/pageSelectByMulti.do", "searchInput=" + pageNum, function (data) {
            console.log(data.data.pageNum)
            $("#pageNum").text("快递编号: " + data.data[0].pageNum)
            console.log(data.data[0].status)
            $("#status").text("最新状态: " + data.data[0].status)
            $("#sNameAndPhone").text(data.data[0].sendName + " " + data.data[0].sendPhone)
            $("#sAddressAndDetailAddress").text(data.data[0].sendProvince + data.data[0].sendCity + data.data[0].sendArea + " " + data.data[0].sendDetail)
            $("#rNameAndPhone").text(data.data[0].receiveName+ " " + data.data[0].receivePhone)
            $("#rAddressAndDetailAddress").text(data.data[0].receiveProvince + data.data[0].receiveCity + data.data[0].receiveArea + " " + data.data[0].receiveDetail)
            $("#createTime").text("创建时间: "+data.data[0].createTime)
            $("#finishTime").text("完成时间: "+data.data[0].updateTime)
            $("#Weight").text("重量:  "+data.data[0].weight+"kg")
            $("#Remark").text("备注:  "+data.data[0].remark)
            //根据status 变换模态框的第一个按钮的显示，以及点击后的显示
            //已下单状态可以修改用户信息，点击跳转修改页面
            var pageNum=data.data[0].pageNum
            if ("已下单" == data.data[0].status) {

                $("#updateOrder").attr("style", "display: block")
                $("#updateOrder").click(function () {
                    location.href="UpdatePageForm.html?pageNum="+pageNum;
                })
                //已取消状态，可以删除订单，
            } else if ("已删除" == data.data[0].status) {
                $("#deleteOrder").attr("style", "display: block")
                ("#ensure").click(function (){
                    deleteOder(pageNum)
                })
            }

        }, "json")
    })

    //点击删除订单记录后并且点击确定
    function deleteOder(pageNum){
        $("body").on("click","#ensure",function () {
            $("#myModal2").modal("hide")
            $("#myModal1").modal("hide")
            $.post("/sdkd/admin/pageDelete.do", "pageNum=" + pageNum, function (data) {
                $(".list").remove()
                $.ajax({
                    url: "/sdkd/userPageInfo/selectSendUserPageInfo.do",
                    async: false,
                    dataType: "json",
                    type: "post",
                    success: function (data) {
                        let list = data.data
                        if (null == list) {
                            console.log("没有数据")
                            return
                        }
                        let html = ''
                        console.log(data)
                        for (let i = 0; i < list.length; i++) {
                            let status = list[i].status
                            pageNum = list[i].pageNum
                            html += `<tr class="list"><td>${i + 1}</td>
                <td>${list[i].pageNum}</td>
                <td>${list[i].sendName}</td>
                <td>${list[i].receiveName}</td>
                <td class="status" id=${status}>${list[i].status}</td>
                <td><input type="button" class="sendDetail" id=${pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
                        }
                        $("#pageTable").append(html)
                    }
                })
            })
        })
    }





    //查看所有订单
    $.post("/sdkd/admin/pageSelectAll.do",function (data) {
            let html = ''
            console.log(data)
            if (data.code == 0) {
                console.log("不存在")
                return
            } else if(data.code == 1){
                for (let i = 0; i < data.data.length; i++) {

                    html += `<tr class="list"><td>${i + 1}</td>
                <td>${data.data[i].pageNum}</td>
                <td>${data.data[i].sendName}</td>
                <td>${data.data[i].receiveName}</td>
                <td>${data.data[i].pageCode}</td>
                <td class="status" id=${data.data[i].status}>${data.data[i].status}</td>
                <td><input type="button" class="orderDetail" id=${data.data[i].pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`

                }
                $("#pageTable").append(html)
            }


        },"json")




//按条件查询订单
    $("#selectBtn").click(function () {
        $(".list").remove()
        $.post("/sdkd/admin/pageSelectByMulti.do","searchInput="+$("#searchInput").val(),function (data) {
                let html = ''
                console.log(data)
                if (data.code == 0) {
                    console.log("不存在")
                    return
                } else if(data.code == 1){

                    for (let i = 0; i < data.data.length; i++) {

               html += `<tr class="list"><td>${i + 1}</td>
                <td>${data.data[i].pageNum}</td>
                <td>${data.data[i].sendName}</td>
                <td>${data.data[i].receiveName}</td>
                <td>${data.data[i].pageCode}</td>
                <td class="status" id=${data.data[i].status}>${data.data[i].status}</td>

                <td><input type="button" class="sendDetail" id=${data.data[i].pageNum} data-target="#myModal1" data-toggle="modal" value="订单详情"></td></tr>`
                    }
                    $("#pageTable").append(html)
                }


        },"json")
    })


</script>
</body>
</html>